<template>
  <div class="container">
    <title-head1 :title="'12小时总收入时间轴(今日)'"></title-head1>

    <div class="group">
      <div ref="pieChartRef" style="width: 100%;height: 100%"></div>
    </div>
  </div>
</template>
<script setup lang="ts">

import TitleHead1 from "@/components/TitleHead1.vue";

import {ref, onMounted, onBeforeUnmount, nextTick} from 'vue'
import * as echarts from 'echarts'

const pieChartRef = ref(null)
let chartInstance: any = null
let highlightTimer: any = null

const chartData = ref([
  {name: '00:00', value: 5},
  {name: '01:00', value: 3},
  {name: '02:00', value: 2},
  {name: '03:00', value: 8},
  {name: '04:00', value: 20},
  {name: '05:00', value: 18},
  {name: '06:00', value: 17},
  {name: '07:00', value: 40},
  {name: '08:00', value: 2},
  {name: '09:00', value: 18},
  {name: '10:00', value: 17},
  {name: '11:00', value: 22},
  {name: '12:00', value: 24}
])

// 初始化图表
const initChart = () => {
  console.log(pieChartRef)

  if (!pieChartRef.value) return

  chartInstance = echarts.init(pieChartRef.value)

  // 初始化图表部分修改
  const option = {
    tooltip: {
      trigger: 'axis',
      show: true,          // 立即显示
      formatter: (params: any) => {
        const date = params[0].name;
        const value = params[0].value;
        return `${date}<br/>收入：${value}元`;
      },
      backgroundColor: 'rgba(10,26,76,0.8)',
      borderColor: 'rgb(31,247,248)',
      textStyle: {
        color: '#fff'
      },
      axisPointer: {
        animation: true // 添加指针动画
      }
    },
    xAxis: {
      type: 'category',
      data: chartData.value.map(item => item.name), // 使用全部时间点
      boundaryGap: false,
      axisLabel: {
        color: '#fff',
        interval: 0, // 强制显示所有标签
        formatter: (value: string) => {
          if (value === '00:00' || value === '04:00' || value === '08:00' || value === '12:00') {
            return value;
          } else {
            return '';
          }
        }
      },
      axisTick: {
        alignWithLabel: true,
        show: false
      },
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      }
    },
    yAxis: {
      type: 'value',
      min: 0,
      max: 60,
      interval: 30,
      axisLabel: {
        color: '#fff',

      },
      splitLine: {
        lineStyle: {
          color: '#fff',
          type: 'solid' // 修改为实线
        },
        interval: 30
      }
    },
    grid: {
      top: 30,
      right: 30,
      bottom: 30,  // 为x轴标签留出空间
      left: 40     // 为y轴标签留出空间
    },
    series: [
      {
        data: chartData.value.map(item => item.value),
        type: 'line',
        symbol: 'none',  // 隐藏连接点
        itemStyle: {
          color: 'rgba(31,247,248,1)'
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0,
              color: 'rgba(31,247,248,0.8)'
            }, {
              offset: 1,
              color: 'rgba(31,247,248,0)'
            }]
          }
        }
      }
    ]
  };

  chartInstance.setOption(option)
}

const updateChartData = () => {
  // 复制原数据并后移数值
  const newData = [...chartData.value];
  for (let i = 0; i < newData.length - 1; i++) {
    newData[i].value = newData[i + 1].value;
  }
  // 为最后一个时间点生成随机数
  newData[newData.length - 1].value = Math.floor(Math.random() * 60);
  
  chartData.value = newData;
  
  // 更新图表
  if (chartInstance) {
    chartInstance.setOption({
      series: [{
        data: chartData.value.map(item => item.value)
      }]
    });
  }
};

// 生命周期
onMounted(() => {
  nextTick(initChart);
  // 每2秒更新数据
  highlightTimer = setInterval(updateChartData, 2000);
});

onBeforeUnmount(() => {
  // 清理资源
  if (highlightTimer) clearInterval(highlightTimer)
  if (chartInstance) chartInstance.dispose()
})
</script>

<style scoped>
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  margin: 10px 0; /* 设置上下边距 */
}

.group {
  height: calc(100% - 40px);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background: #0A1A4C;

}
</style>